<template>
  <div class="bed-card-list">
    <div class="bed-card" v-for="item in listarr" :key="item.index" @click="bedCardClick(item)">
      <div class="head">
            <span class="span" v-if="item.sex === '男'">
              <img
                src="../../icons/img/man.png"
                alt
                style="width: 14px; height: 14px"
              />
            </span>
        <span class="span" v-else-if="item.sex === '女'">
              <img
                src="../../icons/img/female.png"
                alt
                style="width: 14px; height: 14px"
              />
            </span>
        <span class="span" v-else></span>
        <span class="span" style="color: #fff">{{ item.name }}</span>
        <span class="span" v-if="item.sex === '男'" style="color: #8ef0ff"
        >男</span
        >
        <span class="span" v-else-if="item.sex === '女'" style="color: #f09cba">女</span>
        <span class="span" v-else style="color: #f09cba"></span>
        <span class="span" style="color: #fff">{{ item.age }}</span>

        <span class="span severity" v-if="item.criticalLevel == '危'">危</span>
        <span class="span severity red" v-if="item.criticalLevel == '重'">重</span>

        <span class="span-right" style="color: #fff">{{
            item.bed_code_name
          }}</span>
      </div>
      <div id="time-line" style="margin-top: 20px; margin-left: 10px" v-if="item.sex === '男' || item.sex === '女'">
        <div class="itemarr">
          <div class="itemarr-content">住院号：{{ item.visit_id }}</div>
        </div>
        <div class="itemarr">
          <div class="itemarr-content">
            入科时间：{{ item.enter_time.substring(0, 19) }}
          </div>
        </div>
        <div class="itemarr">
          <div class="itemarr-content">
            入科天数：{{ item.department_days }} 天
          </div>
        </div>
        <div class="itemarr">
          <div class="itemarr-content">诊断：{{ item.diagnosis_name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getBedPatientList} from "@/api/table";
import {patientInfoSave} from "@/utils/utils";

export default {
  name: "bedCardList",
  props: {
    refresh: {
      type: Boolean,
      default: false,
    }
  },
  watch: {
    // 监听 弹窗显示， 可以用来写 请求接口
    refresh: function (newVal, oldVal) {
      if(newVal){
        this.init();
      }
    },
  },
  data() {
    return {
      listarr: [],
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init(){
      getBedPatientList().then((res) => {
        this.listarr = res.data;
      });
    },
    bedCardClick(item) {
      //处理无患者时不可以点击
      if (item.name != "") {
        patientInfoSave(item);

        this.$emit("bedDialogSet", false);
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.bed-card-list {
  display: flex;
  flex-wrap: wrap;

  .bed-card {
    width: 31%;
    height: 214px;
    border-radius: 10px;
    background: #ffffff;
    margin: 10px 1%;

    .head {
      height: 30px;
      border-radius: 10px 10px 0 0;
      background: #3f91e4;
    }
  }
}

.span {
  float: left;
  line-height: 30px;
  font-size: 16px;
  margin-left: 15px;
}

.span-right {
  float: right;
  line-height: 30px;
  font-size: 16px;
  margin-right: 28px;
}

.severity {
  font-size: 14px;
  color: white;
  text-align: center;
  width: 24px;
  height: 24px;
  line-height: 24px;
  border-radius: 50%;
  background: #e6a23c;
  margin-top: 3px;
}

.severity.red {
  background: #f56c6c;
}

.itemarr {
  margin-left: 30px; /*用左边margin显示时间线*/
  width: calc(100% - 30px); /*因为左边部分用于显示时间线，所以右边部分减去30px*/
  height: auto; /*高度由内容决定*/
  position: relative;
  margin-bottom: 10px;
  cursor: pointer;
  margin-top: 15px;
}

.itemarr::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 100%;
  background-color: #91c2fc;
  position: absolute;
  left: -15px;
}

.itemarr::after {
  content: "";
  width: 3px;
  height: calc(100% + 15px); /*加上10px是item底部的margin*/
  background-color: #91c2fc;
  position: absolute;
  top: 0;
  left: -11px;
}

.itemarr-content {
  width: 100%;
  height: auto; /*由内容决定*/
  font-size: 17px;
  position: relative;
  white-space: pre-wrap; /*保留空白符序列，但是正常地进行换行*/
  word-wrap: break-word; /*在长单词或 URL 地址内部进行换行*/
}

.itemarr:hover::before {
  transform: scale3d(1.2, 1.2, 1);
  background-color: #569ffb;
}

.itemarr:hover::after {
  transform: scale3d(1.1, 1, 1);
  background-color: #569ffb;
}

.itemarr:hover .itemarr-index {
  transform: scale3d(1.01, 1.01, 1);
  color: #343434;
}
</style>
